<template>
    <div class="banxin">
        <Crumbs :crumbArr="crumbArr" />
        <main class="tanxin">
            <aside>
                <img class="avatar" src="../assets/images/userImg.png" alt="">
                <div class="userInfo">
                    <span>xxxx</span>
                    <a href="javascript">【退出】</a>
                </div>
                <div class="title">
                    <img src="../assets/images/person/transaction.png" alt="">交易管理
                </div>
                <ul>
                    <li @click="$router.push('/user/logout')" :class="{ 'active': $route.path.includes('logout') }">个人中心
                    </li>
                    <li @click="asideActive = 2" :class="{ 'active': asideActive === 2 }">我的订单</li>
                    <li @click="$router.push('/user/cart')" :class="{ 'active': $route.path.includes('cart') }">购物出</li>
                    <li @click="asideActive = 4" :class="{ 'active': asideActive === 4 }">消息通知</li>
                    <li @click="asideActive = 5" :class="{ 'active': asideActive === 5 }">积分明细</li>
                    <li @click="asideActive = 6" :class="{ 'active': asideActive === 6 }">积分攻略</li>
                </ul>
                <div class="title">
                    <img src="../assets/images/person/information.png" alt="">个人信息管理
                </div>
                <ul>
                    <li @click="asideActive = 7" :class="{ 'active': asideActive === 7 }">地址管理</li>
                    <li @click="asideActive = 8" :class="{ 'active': asideActive === 8 }">账号安全</li>
                </ul>
            </aside>
            <article>
                <router-view @updatekeyFn="$emit('updatekeyFn')"></router-view>
            </article>
        </main>
    </div>
</template>

<script>
import Crumbs from '@/components/Crumbs.vue';

export default {
    data() {
        return {
            crumbArr: ["首页", "个人中心"],
            asideActive: 0
        };
    },
    components: { Crumbs }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

main {
    border-top: 2px solid #ececec;
    padding-bottom: 50px;
    min-height: 740px;

    aside {
        width: 200px;
        background: #e7e7e7;
        margin-right: 60px;

        .avatar {
            width: 100px;
            height: 100px;
            display: block;
            margin: 30px auto 19px;
        }

        .userInfo {
            text-align: center;
            margin-bottom: 43px;

            a {
                text-decoration: none;
                color: @blue;
            }
        }

        .title {
            display: flex;
            align-items: center;
            padding-left: 18px;
            margin-bottom: 17px;

            img {
                margin-right: 6px;
            }
        }

        ul {
            padding-left: 20px;

            li {
                color: #6666;
                margin-bottom: 18px;
                cursor: pointer;

                &.active {
                    border-left: 2px solid @blue;
                    color: @blue;
                    padding-left: 10px;
                }
            }
        }
    }

    article {
        flex: 1;
    }
}
</style>